<template>
  <div class="workshop-inspection-width-board" v-loading="isLoading">
    <!--页面标题-->
    <div class="workshop_bench_self_title">
      <!--工序进度tabs-->
      <div class="title_left">
        <el-tabs v-model="activeName" class="title_tab" @tab-click="changeTabs">
          <el-tab-pane
            v-for="(item, index) in tabsList"
            :key="index"
            :label="item.label"
            :name="item.name">
            <span slot="label" class="tab_pane_content">
              {{item.label}}
              <el-tooltip class="item" effect="dark" content="刷新" placement="bottom" v-if="activeName === item.name">
                <i class="iconfont icon-shuaxin" @click="refresh(item.name)"></i>
              </el-tooltip>
            </span>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!--工作台按钮组-->
      <div class="mes_btn">
        <disabled-btn
          v-btn-permission="'unqualified'"
          :judge="unqualifiedBtnStatus"
          iconClass="iconfont icon-faqibuhegeshenqing"
          btnText="发起不合格申请"
          @judgeClick="unqualified"></disabled-btn>
        <disabled-btn
          v-btn-permission="'paramRecord'"
          :judge="paramBtnStatus"
          iconClass="iconfont icon-canshujilu1"
          btnText="参数记录"
          @judgeClick="paramRecord"></disabled-btn>
        <disabled-btn
          v-btn-permission="'completeRegister'"
          :judge="completeBtnStatus"
          iconClass="iconfont icon-btn_Save"
          btnText="检验完工"
          btnType="primary"
          @judgeClick="completeRegister"></disabled-btn>
        <disabled-btn
          v-btn-permission="'workStart'"
          :judge="startBtnStatus"
          iconClass="iconfont icon-kaigongdengji"
          btnText="开始检验"
          btnType="success"
          @judgeClick="workStart"></disabled-btn>
      </div>
    </div>
    <!--查询组件-->
    <mes-search-comp
      ref="mesSearch"
      code-placeholder="[周转码]/[工序编码]/[工序序号]"
      :code-scan="true"
      :searchList="searchList"
      :searchResult="searchResult"
      :showSlotExport="true"
      :showSlotSet="false"
      @codeSubmit="handleCodeScan"
      @exportTable="_exportTable"
      @searchInfo="_info">
    </mes-search-comp>
    <!--卡片区主页面-->
    <div class="board_panel">
      <div class="panel_header">
        <!--全选按钮-->
        <el-checkbox v-model="isCheckedAll" @change="changeAll" :disabled="cardList.length === 0">全选</el-checkbox>
        <sort-btn @sort-change="_sort" :field="'workstageName'" ref="SortBtn"></sort-btn>
      </div>
      <div class="panel_content">
        <!--工序卡片-->
        <bench-board-card
          :list="cardList"
          ref="BenchBoardCards"
          @clickCard="clickCard"
          @changeCard="changeCard"
          v-show="!isLoading"></bench-board-card>
      </div>
      <div class="panel_footer">
        <!--分页组件-->
        <mes-pagination
          @updateData="init"
          :currentPage="listData.pageNo"
          :total="listData.count || 0"
          :pageSize="listData.pageSize">
        </mes-pagination>
      </div>
    </div>
    <!--参数记录-->
    <work-stage-param-record ref="WorkStageParamRecord" @submitSuccess="init"></work-stage-param-record>
    <!--完工登记-->
    <complete-register ref="CompleteRegister" @submitSuccess="init"></complete-register>
    <!--开工登记-->
    <work-stage-start ref="workStageStart" @submitSuccess="init"></work-stage-start>
  </div>
</template>

<script>
import searchList from './columns'
import {WorkStageStart} from '../workShopInspectionComps'
import workbenchBtnService from '../workShopInspectionComps/workbenchBtnService'

import {WorkStageParamRecord} from '@/components/Template'
import CompleteRegister from '@/components/completion/CompleteRegister'
import BenchBoardCard from '@/components/workbenchComps/BenchBoardCard'
import SortBtn from '@/components/workbenchComps/SortBtn'

export default {
  name: 'WorkShopInspectionWidthBoard',
  mixins: [workbenchBtnService],
  components: {
    BenchBoardCard,
    WorkStageParamRecord,
    CompleteRegister,
    WorkStageStart,
    SortBtn
  },
  data() {
    return {
      titleText: '检验工作台-卡片', // 页面标题
      activeName: 'All', // tab的label值
      // 页面顶部tabs列表
      tabsList: [
        {name: 'All', label: '所有'},
        {name: 'ToBeStarted', label: '待开工'},
        {name: 'Started', label: '已开工'}
      ],
      searchData: {}, // 查询对象
      selectData: [], // 选中的卡片
      initSearchList: searchList, // 查询列表
      searchResult: NaN, // 查询个数
      isCheckedAll: false, // 全选
      isLoading: false, // 页面加载
    }
  },
  computed: {
    // 列表对象
    listData() {
      return this.$store.state.workShopInspectionWidthBoard.listData
    },
    // 查询列表
    searchList() {
      let searchList = this.initSearchList
      const noSearch = this.activeName === 'ToBeStarted' || this.activeName === 'Started'
      searchList.forEach((item) => {
        if (item.prop === 'workstageProcessStatusLabel') item.noSearch = noSearch
      })
      return searchList
    },
    // 卡片列表cardList
    cardList() {
      let list = this.listData.list || []
      list.forEach((item) => {
        item.checked = false
      })
      return list
    },
    // 工序进度
    workstageProcessStatusId() {
      let list = this.$store.state.dict.workstageProcessStatusType.labels || []
      let statusId = ''
      if (this.activeName === 'All') statusId = undefined
      if (this.activeName === 'ToBeStarted') statusId = list.find((item) => item.value === 'ToBeStarted').id || undefined
      if (this.activeName === 'Started') statusId = list.find((item) => item.value === 'Started').id || undefined
      return statusId
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    // 全选
    changeAll() {
      if (this.isCheckedAll) {
        this.selectData = this.listData.list
        this.cardList.forEach((item) => {
          item.checked = true
        })
      } else {
        this.selectData = []
        this.cardList.forEach((item) => {
          item.checked = false
        })
      }
      this.transportList()
    },
    // 单选
    changeCard(list) {
      this.selectData = list.filter((item) => item.checked)
      this.isCheckedAll = !list.find((item) => item.checked === false)
    },
    // 刷新
    refresh(tabName) {
      if (this.activeName !== tabName) return
      this.$refs.mesSearch.clean()
      this.$refs.SortBtn.clearSort()
      this.searchData = {}
      this.sortData = {}
      this.selectData = []
      this.isCheckedAll = false
      this.init()
    },
    // 导出表格
    _exportTable() {
      let postData = this.formatPostData({
        pageNo: 1,
        pageSize: 9999999
      }, [])
      this.$exportTable(postData, 'a/turnoverworkstage/turnoverWorkstage/exportasexcel', this.titleText)
    },
    // 扫码刷新
    handleCodeScan(value) {
      this.$refs.mesSearch.clean()
      let strList = value.split('/')
      if (strList.length === 3) {
        this.searchData = {
          turnoverNumber: strList[0],
          workstageNumber: strList[1],
          sort: strList[2]
        }
        this.init()
      } else {
        this.tipMessage('error', '无效搜索码')
      }
    },
    // 查询
    _info(data) {
      this.searchData = data
      this.init()
    },
    // 格式化数据
    formatPostData(page, fields) {
      const list = this.searchList.filter((item) => item.noExport !== true)
      let postData = {
        pageNo: page ? page.pageNo : 1,
        pageSize: page ? page.pageSize : this.listData.pageSize || 15,
        sort: this.sortData,
        query: {
          columns: list.reduce((pre, cur) => [...pre, cur.prop], fields),
          inspectionTypeId: this.inspectionId,
          turnoverProcessStatusId: this.batchProcessStatusIds,
          workstageProcessStatusId: this.workstageProcessStatusId,
          ...this.searchData
        }
      }
      return postData
    },
    /**
     * 列表数据获取
     * @param page
     */
    init(page) {
      const fields = ['inputQuantity', 'scrapQuantity', 'startWorkStaffId', 'turnoverId', 'paramTemplateId', 'workorderId', 'workstageId', 'productBatchNumber', 'sort', 'workstageNumber', 'parameterRecordId']
      let postData = this.formatPostData(page, fields)
      this.isLoading = true
      this.$store.dispatch('saveData', {
        method: 'post',
        url: 'a/turnoverworkstage/turnoverWorkstage/list',
        data: postData,
        module: 'workShopInspectionWidthBoard',
        state: 'listData'
      }).then((res) => {
        if (Object.keys(this.searchData).length > 0) {
          this.searchResult = res.count
        } else {
          this.searchResult = NaN
        }
        this.selectData = []
        this.isCheckedAll = false
      }).finally(() => {
        this.isLoading = false
        this.transportList()
      })
    },
    // 排序
    _sort(obj) {
      this.sortData = obj
      this.init()
    },
    // 向卡片列表组件赋值
    transportList() {
      this.$refs.BenchBoardCards.reload(this.cardList)
    },
    // 选择tabs
    changeTabs() {
      this.$refs.mesSearch.clean()
      this.searchData = {}
      this.init()
    },
    /**
     * 跳转到工序详情
     * params value工序信息
     */
    clickCard(value) {
      const workstageId = value.id
      if (!workstageId) return this.tipMessage('error', '工序参数有误请刷新页面')
      this.$router.push({
        path: 'workShopInspectionWidthBoardDetail',
        query: {
          id: workstageId
        }
      })
    },
    /**
     * 提示
     * @param type 提示类型
     * @param str 提示内容
     */
    tipMessage(type, str) {
      this.$message({
        type: type,
        message: str,
        duration: 1500,
        center: true
      })
    }
  }
}
</script>

<style lang="less">
  .workshop-inspection-width-board {
    .workshop_bench_self_title {
      height: 55px;
      padding: 0px 20px;
      border-bottom: 1px solid #eee;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .title_tab {
      display: flex;
      height: 100%;
      .el-tabs__header {
        margin: 0;
        height: 100%;
      }
      .el-tabs__nav-wrap {
        height: 100%;
        &::after {
          display: none;
        }
        .el-tabs__nav {
          height: 100%;
        }
        .el-tabs__nav-scroll {
          height: calc(100% - 1px);
        }
        .el-tabs__item {
          height: 100%;
          line-height: 56px;
          .tab_pane_content {
            padding: 0 10px;
          }
        }
      }
    }
    .board_panel {
      height: calc(100% - 128px);
      padding: 0 20px 20px 20px;
      box-sizing: border-box;
      position: relative;
      .panel_header {
        height: 40px;
        background-color: #e7ebef;
        padding-left: 10px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .el-checkbox {
          display: flex;
          align-items: center;
          padding-top: 2px;
        }
        .el-checkbox__label {
          line-height: 40px;
          color: #000;
          font-size: 14px;
        }
      }
      .panel_content {
        width: 100%;
        height: calc(100% - 40px);
        padding: 40px;
        box-sizing: border-box;
        background-color: #f2f5f7;
        overflow-y: auto;
        &::-webkit-scrollbar {
          /*滚动条*/
          width: 17px;
          height: 17px;
          cursor: pointer;
          margin-left: 4px;
        }
        &::-webkit-scrollbar-thumb {
          /*小方块*/
          border-radius: 16px;
          box-shadow: @mesTableScrollThumbShow;
          background: @mesTableScrollThumbBg;
          cursor: pointer;
          border: @mesTableScrollThumbBorder;
        }
        &::-webkit-scrollbar-thumb:hover {
          cursor: pointer;
        }
        &::-webkit-scrollbar-track {
          /*轨道*/
          width: 17px;
          background: @mesTableScrollTrackBg;
        }
        &::-webkit-scrollbar-track:hover {
          cursor: pointer;
        }
      }
      .panel_footer {
        width: 100%;
        background-color: #fff;
        position: absolute;
        left: 0;
        bottom: 10px;
        z-index: 999;
      }
      .el-checkbox__inner {
        width: 18px;
        height: 18px;
      }
      .el-checkbox__inner::after {
        left: 6px;
        top: 2px;
      }
    }
  }
</style>
